<template>
  <el-form
    ref="editFormRef"
    :model="localForm"
    :rules="rules"
    label-width="100px"
    status-icon
    style="max-width: 700px; margin: 0 auto"
  >
    <el-form-item label="学员姓名" prop="name">
      <el-input v-model="localForm.name" placeholder="请输入学员姓名" />
    </el-form-item>

    <el-form-item label="学号" prop="studentId">
      <el-input v-model="localForm.studentId" :disabled="isEdit" placeholder="请输入学号" />
    </el-form-item>

    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="localForm.gender">
        <el-radio label="M">男</el-radio>
        <el-radio label="F">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="年龄" prop="age">
      <el-input-number v-model="localForm.age" :min="1" :max="120" />
    </el-form-item>

    <el-form-item label="出生日期" prop="birthday">
      <el-date-picker
        v-model="localForm.birthday"
        type="date"
        placeholder="选择出生日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <el-form-item label="学校" prop="school">
      <el-input v-model="localForm.school" placeholder="请输入学校名称" />
    </el-form-item>

    <el-form-item label="年级" prop="grade">
      <el-input v-model="localForm.grade" placeholder="请输入年级" />
    </el-form-item>

    <el-form-item label="学员手机号" prop="contactPhone">
      <el-input v-model="localForm.contactPhone" placeholder="请输入手机号" />
    </el-form-item>

    <el-form-item label="家长姓名" prop="parentName">
      <el-input v-model="localForm.parentName" placeholder="请输入家长姓名" />
    </el-form-item>

    <el-form-item label="家长手机号" prop="parentPhone">
      <el-input v-model="localForm.parentPhone" placeholder="请输入家长手机号" />
    </el-form-item>

    <el-form-item label="当前课程" prop="currentLevel">
      <el-input v-model="localForm.currentLevel" placeholder="请输入当前课程" />
    </el-form-item>

    <el-form-item label="入学日期" prop="enrollmentDate">
      <el-date-picker
        v-model="localForm.enrollmentDate"
        type="date"
        placeholder="选择入学日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <el-form-item label="状态" prop="status">
      <el-switch v-model="localForm.status" active-text="在读" inactive-text="停课" />
    </el-form-item>

    <el-form-item label="备注" prop="remark">
      <el-input v-model="localForm.remark" type="textarea" placeholder="备注信息" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitEdit" :loading="loading">保存</el-button>
      <el-button @click="cancelEdit">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, watch, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const props = defineProps({
  form: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    default: 'edit' // 'edit' 或 'add'
  }
})

const emit = defineEmits(['update:form', 'close', 'saved'])

const isEdit = computed(() => props.type === 'edit')

const localForm = reactive({
  studentId: '',
  name: '',
  gender: 'M',
  age: null,
  birthday: '',
  school: '',
  grade: '',
  contactPhone: '',
  parentName: '',
  parentPhone: '',
  currentLevel: '',
  enrollmentDate: '',
  status: true,
  remark: ''
})

// 监听外部 form 变化并赋值
watch(
  () => props.form,
  (newVal) => {
    if (newVal) {
      Object.assign(localForm, newVal)
    }
  },
  { immediate: true, deep: true }
)

const rules = {
  studentId: [{ required: true, message: '请输入学号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入学员姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  contactPhone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ]
}

const editFormRef = ref(null)
const loading = ref(false)

const submitEdit = () => {
  editFormRef.value.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    try {
      if (props.type === 'add') {
        await axios.post('http://localhost:8080/api/students', localForm)
        ElMessage.success('学员添加成功')
        emit('update:active', 2)
      } else {
        await axios.put(`http://localhost:8080/api/students/${localForm.studentId}`, localForm)
        ElMessage.success('学员信息修改成功')
      }
      emit('saved')  // 通知父组件刷新数据
      emit('close')  // 通知关闭抽屉
    } catch (err) {
      console.error(err)
      ElMessage.error('保存失败')
    } finally {
      loading.value = false
    }
  })
}

const cancelEdit = () => {
  emit('close')
}
</script>

<style scoped>
.el-form {
  max-width: 700px;
  margin: 0 auto;
}
</style>
